

@mixin rest() {
  padding: 0;
  margin: 0;
  border: 0;
}


p, html, body {
  @include rest;
}

html, body {
  width: 100%;
  height: 100%;
}

p {
  display: block;
}


@for $i from 0 through 30 {
  .m-#{$i} {
    margin: ($i)+px;
  }
  .m-t-#{$i} {
    margin-top: ($i)+px;
  }
  .m-b-#{$i} {
    margin-bottom: ($i)+px;
  }
  .m-l-#{$i} {
    margin-left: ($i)+px;
  }
  .m-r-#{$i} {
    margin-right: ($i)+px;
  }

  .p-#{$i} {
    padding: ($i)+px;
  }
  .p-t-#{$i} {
    padding-top: ($i)+px;
  }
  .p-b-#{$i} {
    padding-bottom: ($i)+px;
  }
  .p-l-#{$i} {
    padding-left: ($i)+px;
  }
  .p-r-#{$i} {
    padding-right: ($i)+px;
  }

  .fz-#{$i} {
    font-size: ($i)+px;
  }
}

@for $i from 0 through 200 {
  .w#{$i} {
    width: ($i)+px;
  }
  .h#{$i} {
    height: ($i)+px;
  }
  .lh#{$i} {
    line-height: ($i)+px;
  }
}

//圆角
@for $i from 0 through 30 {
  .b-radius-#{$i} {
    border-radius: ($i)+px;
  }
}

/* flex布局 */
.flex1 {
  flex: 1;
}

.flex {
  display: flex;


  &-row {
    flex-direction: row;
  }

  &-column {
    flex-direction: column;
  }

  //水平
  &-vertical-c {
    align-items: center;
  }

  &-vertical-b {
    align-items: flex-end;
  }

  &-vertical-t {
    align-items: flex-end;
  }

  //内容分布
  &-justify-c {
    justify-content: center;
  }

  &-justify-l {
    justify-content: flex-start;
  }

  &-justify-r {
    justify-content: flex-end;
  }

  &-justify-between {
    justify-content: space-between;
  }

  &-wrap {
    flex-wrap: wrap;
  }
}

.color-white {
  color: #fff;
}

.color-red {
  color: $fun-danger-color;
}

.fz-b {
  font-weight: bold;
}

/* 颜色 */
.c0 {
  color: #000;
}

.c1 {
  color: #111;
}

.c2 {
  color: #222;
}

.c3 {
  color: #333;
}

.c4 {
  color: #444;
}

.c5 {
  color: #555;
}

.c6 {
  color: #666;
}

.c7 {
  color: #777;
}

.c8 {
  color: #888;
}

.c9 {
  color: #999;
}


.color-green {
  color: $fun-success-color;
}

.color-red {
  color: $fun-danger-color;
}


.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}


